<template>
  <d2-container>
    <el-form :model="FormSearch" status-icon label-width="100px" class="demo-ruleForm">
      <el-row :gutter="24">
        <el-col :span="5">
          <el-form-item label="条件查找">
            <el-input type="text" v-model="FormSearch.name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input type="text" v-model="FormSearch.order_on" placeholder="请输入订单号"></el-input>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择开始时间"
            v-model="FormSearch.startTime"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择结束时间"
            v-model="FormSearch.endTime"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单状态">
            <el-select v-model="FormSearch.order_status" placeholder="请选择订单状态">
              <el-option label="交易中" value="0"></el-option>
              <el-option label="交易成功" value="1"></el-option>
              <el-option label="交易失败" value="-1"></el-option>
              <el-option label="订单取消" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="searchClick()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据表格 -->
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :rowHandle="rowHandle"
      :pagination="page"
      @custom-emit-2="orderInfo"
      @pagination-current-change="paginationCurrentChange"
    />
  </d2-container>
</template>

<script>
import { selectOrder } from "@/api/accountAdmin/index";

export default {
  data() {
    return {
      // 搜索数据
      FormSearch: {
        name: "",
        order_on: "",
        startTime: "",
        endTime: "",
        order_status: ""
      },
      // 字段名称
      columns: [
        {
          title: "订单号",
          key: "order_no",
          align: "center"
        },
        {
          title: "支付订单号",
          key: "pay_no",
          align: "center"
        },
        {
          title: "购买人",
          key: "name",
          align: "center"
        },
        {
          title: "手机号",
          key: "phone",
          align: "center"
        },
        {
          title: "地址",
          key: "address",
          align: "center"
        },
        {
          title: "支付类型",
          key: "pay_type",
          align: "center"
        },
        {
          title: "订单状态",
          key: "order_status",
          align: "center"
        },
        {
          title: "创建时间",
          key: "order_createtime",
          align: "center"
        }
      ],
      // 列表数据
      data: [],
      // 操作列数据
      rowHandle: {
        align: "center",
        custom: [
          {
            text: "订单详情",
            type: "primary",
            size: "mini",
            emit: "custom-emit-2",
          },
        ]
      },
      editTemplate: {
        order_type: {
          title: "订单类型",
          value: "",
          component: {
            name: "el-select",
            options: [
              {
                value: "0",
                label: "厂家订单"
              },
              {
                value: "1",
                label: "经销商订单"
              },
              {
                value: "2",
                label: "批发商-农户订单"
              }
            ]
          }
        },
        order_status: {
          title: "订单状态",
          value: "",
          component: {
            name: "el-select",
            options: [
              {
                value: "0",
                label: "交易中"
              },
              {
                value: "1",
                label: "交易成功"
              },
              {
                value: "2",
                label: "取消订单"
              },
              {
                value: "-1",
                label: "交易失败"
              }
            ]
          }
        },
        pay_type: {
          title: "支付类型",
          value: "",
          component: {
            name: "el-select",
            options: [
              {
                value: "0",
                label: "线下支付"
              },
              {
                value: "1",
                label: "线上支付"
              }
            ]
          }
        }
      },
      formOptions: {
        labelWidth: "80px",
        labelPosition: "left",
        saveLoading: false
      },
      // 分页数据
      page: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      }
    };
  },
  created() {
    let params = {
      page: this.page.pageIndex,
      limit: this.page.pageSize
    };
    this.init(params);
  },
  methods: {
    // 初始化身体数据列表
    init(params) {
      params.orderType = 0
      selectOrder(params)
        .then(res => {
          if (res.success) {
            let order_type1 = "";
            let pay_type1 = "";
            let order_status1 = "";
            let order_types = [];
            let pay_types = [];
            let order_statuss = [];
            res.rows.forEach(item => {
              item.order_types = item.order_type;
              item.pay_types = item.pay_type;
              item.order_statuss = item.order_status;
              if (item.order_type === 0) {
                order_type1 = "厂家订单";
              } else if (item.order_type === 1) {
                order_type1 = "经销商订单";
              }
              if (item.pay_type === 0) {
                pay_type1 = "线下支付";
              } else if (item.pay_type === 1) {
                pay_type1 = "线上支付";
              }
              if (item.order_status === 0) {
                order_status1 = "交易中";
              } else if (item.order_status === 1) {
                order_status1 = "交易成功";
              } else if (item.order_status === 2) {
                order_status1 = "取消订单";
              } else if (item.order_status === -1) {
                order_status1 = "交易失败";
              } else if (item.order_status === 3) {
                order_status1 = "已收货";
              }
              item.order_type = order_type1;
              item.pay_type = pay_type1;
              item.order_status = order_status1;
            });
            this.data = res.rows;
            this.page.total = res.total;
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 查看订单详情
    orderInfo({ index, row }) {
      this.$router.push({
        path: "/saleManageManufacturer/orderManageInfo",
        query: {
          orderNo: row.order_no,
        }
      });
    },

    // 分页数改变，调用
    paginationCurrentChange(pageIndex) {
      let params = {
        limit: this.page.pageSize,
        good: this.FormSearch.good
      };
      params.page = this.page.pageIndex = pageIndex;
      params.orderType = 0
      this.init(params);
    },

    // 条件查询搜索
    searchClick() {
      let params = {
        page: 1
      };
      params = this.FormSearch;
      params.orderType = 0
      this.init(params);
    },

    // 重置查询
    resetForm() {
      this.FormSearch.good = "";
      let params = {
        page: 1,
        limit: 10
      };
      params.orderType = 0
      this.init(params);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>